বুটস্ট্রাপ ৫ একটি শক্তিশালী ফ্রেমওয়ার্ক যা কেবল CSS এবং HTML এর মাধ্যমে লেআউট এবং ডিজাইন তৈরি করতে সহায়তা করে না, বরং JavaScript কম্পোনেন্টসও প্রদান করে, যা আরও ইন্টারেক্টিভ এবং ডাইনামিক ওয়েবসাইট তৈরি করতে সাহায্য করে। এই JavaScript কম্পোনেন্টস ব্যবহার করে আপনি সহজেই মডাল, টুলটিপ, পপওভার, ড্রপডাউন, ক্যালেন্ডার, করসেল ইত্যাদি তৈরি করতে পারেন।
বুটস্ট্রাপ ৫ এ JavaScript কম্পোনেন্টস সহজে বুটস্ট্রাপ JS লাইব্রেরি দিয়ে ইনস্টল করা হয় এবং প্রতিটি কম্পোনেন্টকে কার্যকর করতে কিছু নির্দিষ্ট HTML এবং JavaScript কোড ব্যবহার করতে হয়।
Modal একটি পপ-আপ উইন্ডো যা একটি ডায়লগ বা পপ-আপ ফর্ম তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত কোনও গুরুত্বপূর্ণ তথ্য প্রদর্শন করতে বা ব্যবহারকারীর থেকে ইনপুট নিতে ব্যবহৃত হয়।
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Content goes here...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JavaScript: মডাল সিস্টেমটি বুটস্ট্রাপের JavaScript লাইব্রেরির মাধ্যমে কার্যকর হয়।
Tooltip হল একটি ছোট পপ-আপ বক্স যা কোনও এলিমেন্টের উপর হভার করলে দেখায়। এটি সাধারণত ব্যবহারকারীদের জন্য অতিরিক্ত তথ্য বা হিন্ট প্রদান করার জন্য ব্যবহৃত হয়।
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Hover over me
</button>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
JavaScript: টুলটিপের কার্যকারিতা বুটস্ট্রাপের JavaScript লাইব্রেরি ব্যবহার করে থাকে, যা উপরোক্ত কোডে ইনিশিয়েট করা হয়েছে।
Popover টুলটিপের মতোই কিন্তু এটি আরও বড় এবং সাধারণত অতিরিক্ত কন্টেন্ট প্রদর্শন করতে ব্যবহৃত হয়। এটি আইকন বা বাটনে ক্লিক করলে দেখানো হয়।
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover Title" data-bs-content="Some content inside the popover">
Click to toggle popover
</button>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
JavaScript: পপওভারের কার্যকারিতা bootstrap.Popover ক্লাসের মাধ্যমে কনফিগার করা হয়।
Carousel হলো একটি স্লাইডশো উপাদান যা একাধিক কনটেন্ট (ছবি বা টেক্সট) স্লাইড করে দেখায়। এটি সাধারণত ওয়েবসাইটে প্রচারণা বা প্রোডাক্ট প্রদর্শন করতে ব্যবহৃত হয়।
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x300" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
JavaScript: ক্যারোসেল উপাদানটির অটোমেটিক স্লাইডিং বা ম্যানুয়াল কন্ট্রোলগুলি বুটস্ট্রাপের JavaScript লাইব্রেরি দিয়ে কাজ করে।
Dropdown কম্পোনেন্ট একটি মেনু তৈরি করে যা ক্লিক করলে অথবা হভার করলে ড্রপডাউন মেনু প্রদর্শিত হয়। এটি সাধারণত নেভিগেশন বা অ্যাকশন আইটেমের জন্য ব্যবহৃত হয়।
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
JavaScript: ড্রপডাউন কম্পোনেন্টের কার্যকারিতা data-bs-toggle="dropdown" অ্যাট্রিবিউটের মাধ্যমে পরিচালিত হয়, তবে এক্সট্রা কাস্টম জাভাস্ক্রিপ্ট প্রয়োজন হতে পারে।
বুটস্ট্রাপ ৫ এর JavaScript কম্পোনেন্টগুলি কাজ করতে, আপনাকে Bootstrap JS এবং Popper.js ইনক্লুড করতে হবে। সেগুলি সিডিএন (CDN) লিংক ব্যবহার করে সহজেই অন্তর্ভুক্ত করা যেতে পারে।
<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
এই স্ক্রিপ্টগুলো আপনার HTML ডকুমেন্টের শেষে অন্তর্ভুক্ত করুন, যাতে আপনার পেজ দ্রুত লোড হয় এবং সঠিকভাবে কাজ করে।
বুটস্ট্রাপ ৫ এর JavaScript কম্পোনেন্টগুলো আপনার ওয়েবসাইটে ইন্টারঅ্যাকটিভ উপাদান যোগ করতে সহায়ক। আপনি মডাল, টুলটিপ, পপওভার, ক্যারোসেল, ড্রপডাউন ইত্যাদি কম্পোনেন্ট ব্যবহার করে আপনার পেজের ইউজার এক্সপিরিয়েন্স উন্নত করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
